<!DOCTYPE html>
<!--表格上面的搜索框-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layuiAdmin</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div style="margin: 10px 10px 10px 10px" id="btn">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:80px">用户名</label>
                <div class="layui-input-inline">
                    <!--注意此处input标签里的id-->
                    <input class="layui-input" name="username" id="username" autocomplete="off">
                </div>

                <label class="layui-form-label">电话号码</label>
                <div class="layui-input-inline">
                    <!--注意此处input标签里的id-->
                    <input class="layui-input" name="phone" id="phone" autocomplete="off">
                </div>

            </div>

            <div class="layui-inline">
                <!--注意此处button标签里的type属性-->
                <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                <button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i> 重 置</button>
            </div>
        </div>
    </form>
</div>
<table id="demo" lay-filter="test"></table>
</body>
</html>

<!--顶部操作栏-->
<script type="text/html" id="toolbarDemo">

    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>
<!--每条数据的操作栏-->
<script type="text/html" id="barDemo">

    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    <!-- 这里同样支持 laytpl 语法，如： -->
    {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
    {{#  } }}
</script>

<!--添加 时出现的 form表单-->
<script type="text/html" id="editDialog">
    <form class="layui-form" id="myForm" action="" style="padding: 20px;" lay-filter="editDialogForm">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" placeholder="请输入电话号码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status">
                    <option value="禁用">禁用</option>
                    <option value="正常">正常</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份</label>
                <div class="layui-input-inline">
                    <select name="post">
                        <option value="用户">用户</option>
                        <option value="管理员">管理员</option>
                    </select>
                </div>
        </div>

    </form>
</script>


<script src="../js/jquery-3.1.0.min.js"></script>
<script src="../layui/layui.js"></script>
<script src="../js/common.js"></script>

<!--表格的数据源接口  向后端发送请求-->
<script>
    var xhr = new XMLHttpRequest();
    xhr.open("get","admin/employeeFind");
    xhr.send();
</script>
<script>
    layuiModules=['table', 'layer','form'];

    function mounted(){  //生命周期
        //第一个实例  创建表格
        table.render({   //渲染 表格
            elem: '#demo'
            , toolbar: '#toolbarDemo'
            , height: 550
            , defaultToolbar: []
            , url: '/admin/employeeFind' //数据接口
            , page: true //开启分页
            //, skin: 'line'// 设置表格样式
            , limits: [3, 5, 10]  //一页选择显示3,5或10条数据
            , limit: 10  //一页显示10条数据
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }  //以上是页面自动分页的代码 就写成这样就行了

            , cols: [[ //表头
                {checkbox: true, LAY_CHECKED: false}
                , {field: 'id', title: 'id', width: 120, sort: true}
                , {field: 'username', title: '用户名', width: 120,}
                , {field: 'password', title: '密码', width: 120}
                , {field: 'phone', title: '电话号码', width: 200}
                , {field: 'post', title: '身份', width: 120}
                , {field: 'status', title: '禁用状态', width: 120}
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
        });

        //监听事件   监听 表头的添加和删除  toolbar（监听头部工具条事件）
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var checkData = checkStatus.data;
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 1, //1是页面层  2是iframe层（指定html文件）
                        title: '添加',
                        area: ['50%', '70%'],
                        content: $('#editDialog').html(), //这里content是一个普通的String
                        btn: ['确定', '取消'],
                        success: function (index, layero) {
                            form.render();
                        },
                        yes: function (index, layero) {  //yes是btn中 按第一个出现的内容
                            //是一个CSS选择器，用于指定要获取的DOM元素或jQuery对象
                            const form = layero.find('#myForm'); //找到子页面的表单数据
                            const formData = new FormData(form[0]);//FormData()是一个构造函数，用于创建一个表单数据对象， 这里form[0]是一个表单的DOM元素
                            const data = {};
                            for (const [key, value] of formData.entries()) {
                                data[key] = value;
                            }
                            $.ajax({
                                url: 'http://localhost:8080/admin/employeeAdd',
                                method: 'POST',
                                data: JSON.stringify(data),
                                contentType: 'application/json',
                                success: function (response) {
                                    window.close();
                                    location.reload();
                                    parent.layer.msg("添加成功", {
                                        icon: 6
                                    });
                                },
                            });
                        },
                        btn2: function (index, layero) {
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                    });
                    break;
                case 'delete':
                    console.log(checkData);
                    layer.confirm('真的删除选中行么', function (index) {
                        $.ajax({
                            url: '/employeeDelete',
                            data: JSON.stringify(checkData),
                            method: 'delete',
                            contentType: 'application/json',
                            success: function () {
                                window.close();
                                location.reload();
                            }
                        });
                        layer.close(index);
                        //向服务端发送删除指令
                    });
                    break;
            }

        });

        //监听工具条 监听每条数据后面的 删除和编辑
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                //do somehing
            } else if (layEvent === 'del') { //删除
                var dataMany = [];
                dataMany[0] = data;
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: '/admin/employeeDelete',
                        data: JSON.stringify(dataMany),
                        method: 'delete',
                        contentType: 'application/json',
                        success: function () {
                            obj.del();
                            layer.close(index);
                        }
                    });
                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                layer.open({
                    type: 1,
                    title: '编辑',
                    area: ['50%', '70%'],
                    content: $('#editDialog').html(), //这里content是一个普通的String
                    btn: ['确定', '取消'],
                    success: function (index, layero) {
                        form.val("editDialogForm", data); //回显数据
                    },
                    yes: function (index, layero) {
                        const form = layero.find('#myForm'); //找到子页面的表单数据
                        const formData = new FormData(form[0]);//FormData()是一个构造函数，用于创建一个表单数据对象， 这里form[0]是一个表单的DOM元素
                        const editData = {};
                        for (const [key, value] of formData.entries()) {
                            editData[key] = value;
                        }
                        editData['id'] = data.id;
                        $.ajax({
                            url: 'http://localhost:8080/admin/employeeUpdate',
                            method: 'POST',
                            data: JSON.stringify(editData),
                            contentType: 'application/json',
                            success: function (response) {
                                window.close();
                                location.reload();
                                parent.layer.msg(response.data, {
                                    icon: 6
                                });
                            },
                        });
                    },
                    btn2: function (index, layero) {
                        window.close();
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    , title: 'xxx'
                });
            }
        });

        //查询所用
        form.on('submit(data-search-btn)', function (data) {
            var reloadParams = {
                page: {
                    curr: 1
                },
                where: {
                    // 将 data.field 中的属性添加到 where 对象中
                    // 例如：title: data.field.title
                    //这样他会和一开始的数据做比对  如果是模糊查询 就需要用到ajax传值 但是传回来的数据需要重新渲染，意思是上面的表格流程都要在走一遍，什么表头分页都需要。
                    username:data.field.username,
                    phone:data.field.phone
                }
            };
            var index=layer.msg('查询中', {icon: 16, shade: 0.3, time: 0});
            setTimeout(function () {  //延时直接关闭上面的icon
                table.reload('demo', reloadParams)
                layer.close(index);
            },800)
            return false;  //防止页面无提交刷新
        });
    }
</script>